<template>
    <AppHeader></AppHeader>
    <van-form @submit="onSubmit">
        <van-field v-model="config.name" name="name" label="资源名称" placeholder="高清资源"
            :rules="[{ required: true, message: '请填写资源名称' }]" />
        <van-field v-model="config.url" name="url" label="资源地址" placeholder="http://www.zy.com/api"
            :rules="[{ required: true, message: '请填写资源地址' }]" />
        <van-field v-model="config.jx_url" name="jx_url" label="解析地址" placeholder="http://www.zy.com/api"
            :rules="[{ required: true, message: '请填写解析地址' }]" />
        <van-field name="exclude_channel_ids" label="排除频道" label-align="top" ref="abc">
            <template #input>
                <van-checkbox-group v-model="config.exclude_channel_ids" shape="square" direction="horizontal">
                    <van-checkbox v-for="item in columns" :key="item.value" :name="item.value">{{ item.text
                    }}</van-checkbox>
                </van-checkbox-group>
            </template>
        </van-field>
        <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
                提交
            </van-button>
        </div>
    </van-form>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { ChannelVO } from '@/types/ChannelVO'
import type { ChooseVO } from '@/types/ChooseVO'
import type { SourceVO } from '@/types/SourceVO'
import { showNotify } from 'vant';

const columns = ref<ChooseVO[]>([])
const config = useConfig()

function chooseChannel() {
    useFetch('/api/video', { query: { ac: 'list' } }).then(res => {
        const data = JSON.parse(res.data.value) as ChannelVO
        columns.value = data.class.map(item => {
            return { 'text': item.type_name, 'value': item.type_id }
        })
    })
}

const onSubmit = (values: SourceVO) => {
    useFetch('/api/storage/config', {
        method: 'post',
        body: values
    }).then(res => {
        showNotify({ type: 'success', message: '保存成功' });
    })
}

chooseChannel()

</script>

<style lang="scss" scoped></style>
